@import "../../style/iconfont.scss";
 
$primary-color:#F4811F;
$border-color:#CCCCCC;

.sp-component-newfilterbar{ 

    height:92px; 
    display: flex; 
    background-color: #f5f5f5;
    @include hairline($border-color,1,bottom);

    &.bg-white{
        background-color: white;
    }

    &.border-radius{ 
        border-radius: 40px 40px 0px 0px;
        overflow: hidden;
    }
    
    &-check{
        flex:1;
        display: flex;
        align-items: flex-end;
        padding-left:32px;
        padding-bottom:21px;

        .label{
            font-size: 28px;
            font-weight: 400;
            color: #999999;
            transition: all 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);

            &:not(:first-child){
                margin-left: 60px;
            }

            &.checked{
                font-size: 36px;
                font-weight: 600;
                color: #222222;
            }
        }
    }
 
    &-filter{
        width:158px;
        padding:27px 0;
        flex-shrink: 0;
        flex-grow: 0;

        &-wrapper{

            display: flex;
            padding-left:34px;
            align-items: center;
            @include hairline($border-color,0,left);

            .filtertext{
                color:$primary-color;
                font-size: 28px;
            }

            .iconfont{
                color:$primary-color;
                font-size: 30px;
                margin-left:4px;
            }
        }
    }
}